<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>填写信息</title>
	<%@ include file="../common/common.jsp"%>
	<%@ include file="../lib/vue/vue_common.jsp"%>
	<link rel="stylesheet" type="text/css" href="${ctx}/page/lib/other/css/main.css" />
	<link rel="stylesheet" href="${ctx}/page/product/css/editProductOrder.css?v=${version}"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/page/lib/tinyalert/css/zepto.alert.css">
	<script type="text/javascript" src="${ctx}/page/lib/tinyalert/js/zepto.alert.js"></script>
</head>
<body>
<div id="app">
	<div class="bg-silver border-bottom" style="height:5px;"></div>
	<div class="subBg padding-top padding-bottom">
		<div class="line padding-small">
			<div class="xs3 text-center">商品名称:</div>
			<div class="xs9">${product.name}</div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量:</div>
			<div class="xs9">
				<div class="several">
					<span id="subtract" class="subtract">
						<i></i>
					</span>
					<input id="counts" class="number" type="text"  value="1" />
					<span id="add" class="add">
						<i></i>
					</span>
					<span class="text-small">每单限购${product.limitUnit}${product.unit}</span>
				</div>
			</div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</div>
			<div class="xs9">
				<div class="amount">
					<ul>
						<li v-for="item in amount" :class="selectAmount===item.skuName ?'selected':''" @click="changeAmount(item.skuName)">
							<div>{{item.skuName}}</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:</div>
			<div class="xs9"><fmt:formatNumber type="number" value="${price}" pattern="0.00" maxFractionDigits="2"/>&nbsp;贝币</div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">商品金额:</div>
			<div class="xs9" id="prdtAmount"><fmt:formatNumber type="number" value="${price}" pattern="0.00" maxFractionDigits="2"/>&nbsp;贝币</div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费:</div>
			<div class="xs9"><fmt:formatNumber type="number" value="${product.startFreight}" pattern="0.00" maxFractionDigits="2"/>&nbsp;贝币</div>
		</div>
	</div>
	<div class="bg-silver border-top border-bottom" style="height:10px;"></div>
	<div class="subBg border-bottom padding-top padding-bottom">
		<div class="line padding-small">
			<div class="xs3 text-center">收&nbsp;&nbsp;货&nbsp;&nbsp;人:</div>
			<div class="xs9"><input type="text" class="input" id="receiveName" name="receiveName" value="${receiveName}" placeholder="必填" /></input></div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">手&nbsp;&nbsp;机&nbsp;&nbsp;号:</div>
			<div class="xs9"><input type="text" class="input" id="receiveMobile" name="receiveMobile" value="${receiveMobile}" placeholder="必填" /></input></div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">收货地址:</div>
			<div class="xs9"><textarea type="text" class="input" id="receiveAddress" name="receiveAddress" placeholder="必填" /></textarea></div>
		</div>
		<div class="line padding-small">
			<div class="xs3 text-center">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</div>
			<div class="xs9"><textarea type="text" class="input" id="remark" name="remark" placeholder="备注信息（选填）" /></textarea></div>
		</div>
		<c:if test="${product.description ne ''}">
			<div class="line padding-small">
			<div class="xs3 text-center text-small">温馨提示:</div>
			<div class="xs9 text-small">${product.description}</div>
		</div>
		</c:if>
	</div>
	<div class="margin">
		<button id="makesure" class="sureBtn">确认订单</button>
	</div>
</div>
<input id="productId" type="hidden" value="${product.id}">
<input id="limitUnit" type="hidden" value="${product.limitUnit}">
<input id="unit" type="hidden" value="${product.unit}">
<input id="selectSku" type="hidden" value="${defaultSku}">
<script type="text/javascript">
var app = new Vue({
	el: '#app',
	data: {
		amount:${productSkus},
		selectAmount:"${defaultSku}",
		paying:false,
	},
	watch:{
		
	},
	methods: {
		changeAmount:function(skuName){
			if(skuName == this.selectAmount){
				return;
			}
			this.selectAmount=skuName;
			$("#selectSku").val(this.selectAmount);
		},
	},
	mounted: function() {
	}
});
</script>
<script type="text/javascript">
	$(document).ready(function(){
		var price = '${price}';
		var receiveAddress = '${receiveAddress}';
		$("#receiveAddress").val(receiveAddress);
		$('#subtract').on('click', function() {
			var counts = $("#counts").val();
			var limitUnit = $("#limitUnit").val();
			if(parseInt(counts)<=1){

			}else{
				var newCounts = parseInt(counts) - 1;
				$("#counts").val(newCounts);
				var amount = newCounts * parseFloat(price);
				amount = amount.toFixed(2);
				$("#prdtAmount").html(amount+"贝币");
			}
		});
		$('#add').on('click', function() {
			var counts = $("#counts").val();
			var limitUnit = $("#limitUnit").val();
			if(parseInt(limitUnit) != 0 && parseInt(limitUnit)<=parseInt(counts)){
				$.dialog({
					content : "数量超过限制!最大为"+limitUnit,
					title: "alert",
					time : 2000
				});
			}else{
				var newCounts = parseInt(counts) + 1;
				$("#counts").val(newCounts);
				var amount = newCounts * parseFloat(price);
				amount = amount.toFixed(2);
				$("#prdtAmount").html(amount+"贝币");
			}
		});
        $('#counts').on('input', function(e) {
        	var limitUnit = $("#limitUnit").val();
        	var counts = $("#counts").val();
    		if(empty(counts)){
				return;
    		}
    		var re = /^[1-9]+[0-9]*]*$/;
    		if (!re.test(counts)) {
    			 counts = 1;
    			 $("#counts").val(counts);
    			 $.dialog({
    				content : '数量必须为数字!',
    				title: "alert",
    				time : 2000
    			});
    		}else if(parseInt(limitUnit) != 0 && parseInt(limitUnit)<parseInt(counts)){
    			counts = limitUnit;
    			$("#counts").val(limitUnit);
				$.dialog({
					content : "数量超过限制!最大为"+limitUnit,
					title: "alert",
					time : 2000
				});
    		}else{
				var amount = counts * parseFloat(price);
				amount = amount.toFixed(2);
				$("#prdtAmount").html(amount+" 贝币");
    		}
    		
        });
		$('#makesure').on('click', function() {
	        //$.dialog();
	        confirmOrder();
		});
	});
	var flag = true;
	function confirmOrder(){
		var skuName = $("#selectSku").val();
		var productId = $("#productId").val();
		var counts = $("#counts").val();
		if(empty(counts)){
			counts = 1;
			$("#counts").val(counts);
		}
		var re = /^[1-9]+[0-9]*]*$/;
		if (!re.test(counts)) {
			//alert("数量必须为数字!");
			 $.dialog({
				content : '数量必须为数字!',
				title: "alert",
				time : 2000
			});
			return ;
		}
		var limitUnit = $("#limitUnit").val();
		var unit = $("#unit").val();
		if(parseInt(limitUnit) != 0 && parseInt(limitUnit)<parseInt(counts)){
			//alert("数量超过限制!最大为"+limitUnit+unit+".");
			$.dialog({
				content : "数量超过限制!最大为"+limitUnit,
				title: "alert",
				time : 2000
			});
			return ; 
		}
		var receiveName = $("#receiveName").val();
		if(empty(receiveName)){
			//alert("请输入收货人姓名");
			$.dialog({
				content : "请输入收货人姓名",
				title: "alert",
				time : 2000
			});
			return;
		}
		if(receiveName.length > 10){
			//alert("收货人姓名不能大于10个字符！");
			 $.dialog({
				content : '收货人姓名不能大于10个字符！',
				title: "alert",
				time : 2000
			});
			return;
		}
		var receiveMobile = $("#receiveMobile").val();
		if(empty(receiveMobile)){
			//alert("请输入收货人手机号");
			$.dialog({
				content : '请输入收货人手机号!',
				title: "alert",
				time : 2000
			});
			return;
		}
		var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
		if (!reg.test(receiveMobile)) {
			//alert("手机号码格式有误!");
			$.dialog({
				content : '手机号码格式有误!',
				title: "alert",
				time : 2000
			});
			return;
		}
		var receiveAddress = $("#receiveAddress").val();
		if(empty(receiveAddress)){
			//alert("请输入收货地址");
			 $.dialog({
				content : '请输入收货地址!',
				title: "alert",
				time : 2000
			});
			return;
		}
		if(receiveAddress.length > 150){
			//alert("收货地址不能大于150个字符！");
			 $.dialog({
				content : '收货地址不能大于150个字符!',
				title: "alert",
				time : 2000
			});
			return;
		}
		var remark = $("#remark").val();
		if(remark.length > 50){
			//alert("备注不能大于50个字符！");
			 $.dialog({
				content : '备注不能大于50个字符!',
				title: "alert",
				time : 2000
			});
			return;
		}
		
		if(flag){
			flag = false;
			var dialog = $.dialog({
		        content : '订单确认中,请稍后...'
		    });
			
			$.ajax({
				type : 'POST',
				url : ctx + '/page/confirmProductOrder.do',
				data : {
					productId:productId,
					skuName:skuName,
					counts:counts,
					receiveName:receiveName,
					receiveMobile:receiveMobile,
					receiveAddress:receiveAddress,
					remark:remark
				},
				dataType : 'json',
				timeout : 30000,
				context : $('body'),
				success : function(data) {
					dialog.close();
					if (data.code == "ok") {
						flag = true;
						var obj = data.object;
						window.location.href=mServerUrl+"/page/confirmProductOrderView.htm?orderNo="+obj.orderNo+"&time="+((new Date()).getTime());
					} else {
						flag = true;
					    $.dialog({
					        content : data.msg,
					        title: "alert",
					        time : 2000
					    });
					}
				},
				error : function(xhr, type) {
					dialog.close();
					flag = true;
				    $.dialog({
				        content : '提交失败!',
				        title: "alert",
				        time : 2000
				    });
				}
			});
		}		
	}
</script>
</body>
</html>